<template>
  <div  class="gk-layout-container"  >
	<div  class="gk-layout-header"  >
	<div style="float:left;" >
		<el-form :inline="true" :model="filters" :size="global.gSize">
			<el-form-item>
				<el-input v-model="filters.name" placeholder="物料名称"></el-input>
			</el-form-item>
			<el-form-item>
				<kt-button :label="$t('action.search')" perms="core:coreStock:view" type="primary" @click="findPage(null)"/>
			</el-form-item>	
			<el-form-item> 
				<kt-button icon="fa fa-plus" :label="$t('action.add')" perms="core:coreStock:view" type="primary" @click="handleAdd" />
			</el-form-item>		
		</el-form>
		</div>
	</div>
    <div class="gk-layout-main">
      <my-table :data="pageResult.content"  :loading="loading" >
          <el-table-column :label="$t('action.desc')" width="50" fixed="left"  header-align="center" align="center">
            <template slot-scope="scope">   {{scope.$index+1}}   </template>
          </el-table-column> 
          <Column  width="300"  prop="name" label="物料名称"   />
		  <Column   prop="boxCode" label="条码"  />
          <Column   prop="dCount" label="物料数量"    />
          <Column   prop="locId" label="库位"  />
		  <Column   prop="status" label="状态" :formatter="selectionFormat"    />
          <Column   prop="createTime" label="创建时间" :formatter="dateFormat"    />
          <el-table-column  header-align="center"  align="center" width="300"    :label="$t('action.operation')" >
              <template slot-scope="scope">
                <kt-button icon="fa fa-edit" :disabled="scope.row.status!=2"     :label="$t('action.edit')"  perms="core:StocktIn:edit" :size="global.gSize"   @click="handleEdit(scope.$index, scope.row)" />
			    <kt-button icon="fa fa-trash" :disabled="scope.row.locId>2000"    label=" "  perms="core:StocktIn:edit" :size="global.gSize"   @click="handleDelete(scope.$index, scope.row)" />
              </template>
          </el-table-column>
      </My-table>
  </div>
  <!--分页栏-->
  <div class="toolbar gk-layout-footer"  style="padding:10px;"> 
    <el-pagination layout="total, prev, pager, next, jumper"  @current-change="findPage"
                   :current-page="pageRequest.pageNum"
                   :page-size="pageRequest.pageSize"
                   :total="pageResult.totalSize"
                   style="float:right;">
    </el-pagination>
  </div>
  
	<el-dialog title="编辑信息" width="70%"   :visible.sync="editDialogVisible1" :close-on-click-modal="false">
		<div class="gk-layout-main" style="height:320px">
			<el-form :model="tmpDetail" label-width="90px" ref="dataForm1" :size="global.gSize" :rules="dataFormRules" label-position="right">
				<el-row :gutter="24">
					<el-col :span="8">
						<el-form-item label="托盘条码" prop="boxCode">
							<el-input v-model="selectStock.boxCode"  auto-complete="off" style="width: 100%;"   :disabled="selectStock.id>0"/>	
						</el-form-item>
					</el-col>


					<el-col :span="8">
						<el-form-item label="物料名称" prop="boxCode">
							<el-select v-model="tmpDetail.itemId" style="width: 175px;" clearable  filterable 	placeholder="物料">
								<el-option v-for="i in Items" :key="i.id" :label="i.name"
									:value="i.id">
								</el-option>
							</el-select>	
						</el-form-item>
					</el-col>


							
				</el-row>
				<el-row :gutter="24">
					<el-col :span="8">
						<el-form-item label="新增编码"  prop="barCode"  >
							<el-input v-model="tmpDetail.barCode" ref="barCode"  placeholder="回车添加" @keyup.enter.native="addBarCodes"></el-input>
						</el-form-item>



					
					</el-col>
					<el-col :span="8">
						<el-form-item label="资产分类" prop="fenlei">
							<el-select v-model="tmpDetail.fenlei" style="width: 100%;"  >
								<el-option v-for="item in dicts.fenlei" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="资产数量" prop="countDb">
							<el-input v-model="tmpDetail.countDb"    auto-complete="off" style="width: 100%;"  />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<my-table :data="detailList"    v-loading="loading" :key="timer" >
				<el-table-column :label="$t('action.desc')" width="50" fixed="left"  header-align="center" align="center">
					<template slot-scope="scope">   {{scope.$index+1}}   </template>
				</el-table-column> 
				<Column  prop="itemId" label="物料名称"   :formatter= "itemFilter" />
				<Column   prop="barCode" label="物料条码"    />   
				<el-table-column label="数量" width="100" fixed="left"  header-align="center" align="center">
					<template slot-scope="{row}">  
						<span   v-show="!row.edit" > {{row.countDb}}</span>
						<el-input v-model="row.countDb" v-show="row.edit"  auto-complete="off" style="width: 100%;"  />
					</template>
				</el-table-column> 
				<Column   prop="storeStatus" label="状态"    :formatter= "selectionFormat" />
				<Column  prop="inTime" label="入库时间"     :formatter= "dateFormatDay" />
				<el-table-column    :label="$t('action.operation')" width="180">
					<template slot-scope="scope">
						<kt-button icon="fa fa-edit"  label="编辑"  perms="core:coreStock:showDetail"    v-if="!scope.row.edit"  @click="editRow(scope,true)" />
						<kt-button icon="fa fa-trash" label=" "  perms="core:coreStock:showDetail"      @click="removeRow(scope,scope.row)" />
						<kt-button icon="fa fa-edit"  label="完成"  perms="core:coreStock:showDetail"   v-if="scope.row.edit"  @click="editRow(scope,false)" />
					</template>
				</el-table-column>
			</my-table>
		 </div>
		 <div slot="footer"  class="dialog-footer">
			<el-button :size="global.gSize"  @click.native="editDialogVisible1= false">{{$t('action.cancel')}}</el-button>
			<el-button :size="global.gSize"   type="primary"   :loading="editLoading"  @click.native="submitForm">{{$t('action.submit')}}</el-button>
		</div>
	</el-dialog>
	
  </div>
</template>

<script>

import KtButton from "@/views/Core/KtButton"
import MyTable from "@/views/Core/MyTable"
import Column from "@/views/Core/Column"
import { format,formatDay } from "@/utils/datetime"
import {  dictsFormat ,getItemName} from "@/utils/myUtil"
 
 

import { validatorNumber } from "@/utils/validate"
import XLSX from "xlsx";
export default {
	components:{
			MyTable,
			KtButton,
		    Column,

	},
	data() { 
		return { 
	 		timer:new Date().getTime() , //声明timer 
			filters: {
				stockStatus:2
			}, 
			Items: [],
			deleteIds:[],
			loading: false,
			pageRequest: { pageNum: 1, pageSize: 8 },
			pageResult: {},
		 
			selectStock: {},
			detailList:[],
			tmpDetail:{},

			dicts:{},
			editLoading: false,	
		    editDialogVisible1:false,
			dataFormRules: {
                    barCode: [{ required: true, trigger: 'blur' , message: "请输入条码"}],
					countDb: [{ required: true, trigger: 'blur',validator: validatorNumber }]
            },
		}
	},
	methods: {
		addBarCodes:function(data){
			this.$refs.dataForm1.validate((valid) => {
				if (valid) {
					let barCode = this.tmpDetail.barCode;
					if(barCode.length>=4){
						if(!this.detailList){
							this.detailList=[]
						}
						this.detailList.push(Object.assign({},  this.tmpDetail))
					}
					this.tmpDetail.barCode="";

				}
			})
			
		},

		itemFilter: function (row, column, cellValue, index) {
		 debugger
			return getItemName(cellValue,this.Items)
		},
		// 获取分页数据
		findPage: function (data) {
			data=data||1
			this.filters.pageNum=data
			this.pageRequest.pageNum=data
			this.filters.pageSize=this.pageRequest.pageSize
			this.filters.playType=1
			this.$api.coreStock.findPage(this.filters).then((res) => {
				this.pageResult = res.data
			}).then(data!=null?data.callback:'')
		},				
		// 获取明细数据
		findDetailPage: function (data) {
			this.$api.coreStock.GetListByStockId(data).then((res) => {
				this.detailList= res.data
				this.timer = new Date().getTime(); 
			}).then(data!=null?data.callback:'')
		},		

			// 显示编辑界面
		handleEdit: function (params,row) {
			this.editDialogVisible1= true
			this.selectStock = Object.assign({}, row)
			this.findDetailPage(row);
			this.deleteIds=[];
		},
		editRow:function(scope ,b){ 
			scope.row.edit=b;
			this.timer = new Date().getTime(); 
		},
		removeRow:function(scope ,b){
			debugger
			var index=scope.$index
			this.deleteIds.push(b.id)
			this.detailList.splice(index,1)
			this.timer = new Date().getTime(); 
		}, 
		handleDelete: function (params,row) {
			this.rowDataForm = Object.assign({},  row);
			this.editLoading = true
			this.$api.coreStock.deleteStock(this.rowDataForm).then((res) => {
				//this.editLoading = false
				if (res.code == 200) {
				this.$message({ message: this.$t('action.operateSucess'), type: 'success' })
				} else {
				this.$message({ message: this.$t('action.operateFail') + res.msg, type: 'error' })
				}
				this.findPage(null)
			})
		},
		handleAdd: function () {
			this.editDialogVisible1= true
			this.selectStock={};
			this.detailList=[]
		},
		//新增
		submitForm: function () {
			if(!this.selectStock.boxCode){
				this.$message({ message:"请输入托盘条码", type: 'error' })
				return;
			}
			this.editLoading = true
			var data={detList:this.detailList,main:this.selectStock,deleteIds:this.deleteIds}
			this.$api.coreStock.SaveStock(data).then((res) => {
				this.editLoading = false
				if (res.code == 200) {
					this.$message({ message: this.$t('action.operateSucess'), type: 'success' })
					this.editDialogVisible1 = false
					this.$refs['dataForm1'].resetFields()
				} else {
				this.$message({ message: this.$t('action.operateFail') + res.msg, type: 'error' })
				}
				this.findPage(null)
			}) 
		},
		// 时间格式化
      	dateFormat: function (row, column, cellValue, index){
          	return format(row[column.property])
      	},	
		// 时间格式化
      	dateFormatDay: function (row, column, cellValue, index){
          	return formatDay(row[column.property])
      	},
		selectionFormat: function (row, column, cellValue, index){
			let key=""
			let propt=column.property;
			if(propt=="status"){
				key="stockStatus"
			}else if (propt == "storeStatus") {
					key = "storeStatus"
			} else if(propt=="locked"){
				key="isLocked"
			}
		    let val=row[propt];
			let dict = this.$store.state.dict.dicts[key];
          	return dictsFormat(dict,key,val)
      	}
	},
	 created () {
         this.dicts=this.$store.state.dict.dicts
		 this.Items=this.$store.state.dict.item
    },
	mounted(){
		 this.findPage()
	}
}
</script>

<style scoped>

</style>